<template>
	<div class="wrap">
		<div class="headDd">
		<p class="myDingdan">我的订单</p>
		</div>
		<div class="ddnav">
		<dd-nav></dd-nav>
		</div>
		<div class="apple-one">
		<div class="orderForm">
			<p class="ddnumber">订单号：150319690000</p>
			<p class="dddate">下单日期 : 2017.12.25  18:06:06  </p>
			<p class="ddshop">爱果果水果店</p>
			<p class="ddClose">订单状态：<span>关闭</span></p>
		</div>
		<!---->
		<div class="contdd">
		<div class="apple">
			<div class="topdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
			<div class="btmdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
		</div>
		<div class="price">
			<p class="dianpu">店铺合计:¥60.0</p>
			<p>(含运费:¥10.0)</p>
		</div>
		<div class="deldd">
			<router-link to="/dingdan03"><p>查看详情</p></router-link>
			<button class="deleldd">删除订单</button>
		</div>
		</div>
		</div>
		<!---->
		<div class="apple-two">
		<div class="orderForm">
			<p class="ddnumber">订单号：150319690000</p>
			<p class="dddate">下单日期 : 2017.12.25  18:06:06  </p>
			<p class="ddshop">爱果果水果店</p>
			<p class="ddClose">订单状态：<span>待付款</span></p>
		</div>
		<div class="contdd">
		<div class="apple">
			<div class="topdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
			<div class="btmdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
		</div>
		<div class="price">
			<p class="dianpu">店铺合计:¥60.0</p>
			<p>(含运费:¥10.0)</p>
		</div>
		<div class="deldd">
			<router-link to="/dingdan03"><p>查看详情</p></router-link>
			<button class="zhifu">去支付</button>
			<button class="quxiaodd">取消订单</button>
		</div>
		</div>
		</div>
		
		<!---->
		<div class="apple-three">
		<div class="orderForm">
			<p class="ddnumber">订单号：150319690000</p>
			<p class="dddate">下单日期 : 2017.12.25  18:06:06  </p>
			<p class="ddshop">爱果果水果店</p>
			<p class="ddClose">订单状态：<span>待发货</span></p>
		</div>
		<div class="contdd">
		<div class="apple">
			<div class="topdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
			<div class="btmdd">
				<div class="appleImage">
					<img src="../../assets/img/geren/apple.png"/>
				</div>
				<p class="yunnan">云南昭通坏苹果</p>
				<p class="six">6个装</p>
				<p class="twoyuan">¥20.0✖️1</p>
			</div>
		</div>
		<div class="price">
			<p class="dianpu">店铺合计:¥60.0</p>
			<p>(含运费:¥10.0)</p>
		</div>
		<div class="deldd">
			<router-link to="/dingdan03"><p>查看详情</p></router-link>
			<button class="sqtuikuan">申请退款</button>
			<router-link to="/dingdan02"><button class="pingjia">去评价</button></router-link>
		</div>
		</div>
		</div>
		<!---->
		<addpage></addpage>
	</div>
</template>

<script>
	import addpage from '@/components/gerenzhongxin/addpage'
	import ddNav from '@/components/gerenzhongxin/ddNav'
	export default {
		components: {
			ddNav,
			addpage
		},
		methods: {
			apple:function(){
				$(".deleldd").click(function(){
					$(".apple-one").slideUp(1000);
				});
					$(".quxiaodd").click(function(){
					$(".apple-two").slideUp(1000);
				});
				
			}
		},
		mounted: function() {
		this.apple();
		}

	}
</script>

<style scoped="scoped">
	.wrap {
		width: 1085px;
		/*height: 625px;*/
		float: left;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	.headDd{
		width: 100%;
		height: 58px;
		border-bottom: 1px solid #E9E9E9;
	}
	.myDingdan{
		font-size: 18px;
		margin-left: 21px;
		line-height: 58px;
	}
	.ddnav{
		margin-top: 20px;
		}
	.orderForm{
		width: 1044px; 
		height: 46px;
		background: #DCDCDC;
		margin-top: 25px;
		margin-left: 22px;
	}
	.orderForm p{
		line-height: 46px;
		float: left;
		font-size: 16px;
	}
	.ddnumber{
		margin-left: 21px;	
	}
	.dddate{
		margin-left: 50px;
	}
	.ddshop{
		margin-left: 50px;
		color: #4b943d;
	}
	.ddClose{
		margin-left: 260px;
	}
	.ddClose span{
		color: #f08200;
	}
	.contdd{
		width: 1044px;
		height: 241px;
		border: 1px solid #e9e9e9;
		margin-left: 21px;
		margin-bottom: 20px;
	}
	.apple{
		width: 696px;
		height: 241px;
		float:left;
		border: 1px solid #e9e9e9;
		border-left: none;
		border-bottom: none;
	}
	.price{
		float:left;
		width: 206px;
		height: 241px;
		border: 1px solid #e9e9e9;
		border-left: none;
		border-bottom: none;
	}
	.deldd{
		float:left;
		height: 241px;
		width: 136px;
	}
	.topdd{
		width: 696px;
		height: 120px;
		border-bottom: 1px solid #E9E9E9;
	}
	.appleImage{
		float: left;
		margin-left: 20px;
		margin-top: 20px;
	}
	.topdd p{
		float: left;
		line-height: 120px;
		font-size: 14px;
	}
	.btmdd p{
		float: left;
		line-height: 120px;
		font-size: 14px;
	}
	.yunnan{
		margin-left:20px;
	}
	.six{
		margin-left: 140px;
		color: darkgray;
	}
	.twoyuan{
		margin-left: 108px;
	}
	.price p{
		text-align: center;
		padding: 3px;
	}
	.dianpu{
		margin-top: 98px;
	}
	.deldd p{
		margin-top: 88px;
		margin-left: 46px;
		width: 58px;
		font-size: 14px;
		color: #4b943d;
		border-bottom: 1px solid #4b943d;
	}
	.deleldd ,.zhifu,.sqtuikuan,.deleldd{
		font-size: 14px;
		color: white;
		font-size: 14px;
		background: #f08200;
		width: 90px;
		height: 30px;
		border-radius: 5px;
		margin:19px 28px;
	}
	.quxiaodd{
		width: 90px;
		height: 30px;
		background: #999999;
		color: white;
		font-size: 14px;
		margin-left: 28px;
		border-radius: 5px;
	}
	.pingjia{
		background: #f08200;
		width: 90px;
		height: 30px;
		border-radius: 5px;
		color: white;
		margin-left: 28px;
		font-size: 14px;
	}
</style>